用JavaScript操控HTML 可使用以下兩種方法：

• innerHTML:組完字串後，傳進語法進行渲染。效能快，但有資訊安全的風險，要確保來源沒有問題，要小心使用，因安全性問題有表單輸入的部分儘量不要使用。

• createElement：以DOM節點來處理。安全性較高，但效能差。

• innerHTML vs textContent

innerHTML可以插入新增一個標籤及其內容，但是textContent的話只能單純增加為文字內容。例如現在希望在h1標籤中增加一個<a href=”#”>我是連結<a>，藉由以下範例來看看結果有什麼不同：

    <h1 class=innertest></h1>
    <h1 class=innertest></h1>
    </h1>
    <script>
        var inner = document.querySelectorAll('.innertest');
        inner[0].innerHTML = '<a href="#">我是連結</a>';
//要注意的是a標籤內的href="#"，如打成單引號'#'，則會出現錯誤，因a標籤外已使用單引號，所以必須使用雙引號做區隔。
        inner[1].textContent = '<a href="#">我是連結</a>';
    </script>

頁面顯示結果為：

第一個h1使用innerHTML，會插入一個a標籤及其內容。
第二個h1使用textContent則是將一整段a標籤及其文字內容當成一串字串輸出。

• innerHTML

若是要插入的innerHTML中的某些內容，希望能夠是用變數方式操作，可使用＋來組字串：

    <ul class='list'></ul>

    <script>
        var ul = document.querySelector('.list');
        var link = "http://www.google.com";
        var name = "Lexi.L";

        ul.innerHTML = "<li><a href='" + link + "'>" + name + "</a></li>";
    </script>

頁面顯示結果：

（點選Lexi.L可連結至http://www.google.com）

innerHTML與for的運用範例：

    <h1 id='nameid'>產品名稱</h1>
    <ul class='list'></ul>
    <script>
        var products = [{
                name: "經典款T",
                price: 390,
                storage: 10
            },
            {
                name: "刷色牛仔長褲",
                price: 590,
                storage: 2
            },
            {
                name: "飄逸長褲",
                price: 790,
                storage: 7
            },
            {
                name: "點點洋裝",
                price: 650,
                storage: 4
            }
        ];

        var prdname = '';
        var i;
        var ul = document.querySelector('.list');

        for (i = 0; i < products.length; i++) {
            prdname += "<li>" + products[i].name + "</li>";
        }
        ul.innerHTML = prdname;
    </script>

頁面顯示結果：

• createElemant() 與appendchild()

如果要增加標籤元素，除了innerHTML還可以使用createElemant，兩者的差別在於innerHTML是組好字串之後整串插入到HTML的方式新增一個標籤內容; 而createElemant是先動態新增一個標籤元素的節點，再對此標籤節點加入內容，最後再用appendchild()，將這個標籤元素新增為一個子節點。

範例1：在h1下插入一個em標籤，並增加內容及屬性。

    <h1 class='test'></h1>

    <script>
        var em = document.createElement('em'); //動態新增一個em標籤
        em.textContent = "我用createElement新增出來的"; //新增內容至em標籤中
        em.setAttribute('class', 'red'); //對em標籤增加一個屬性class ='red'
        //將整個em的標籤掛到h1底下（要先找到h1，再掛上去）
        document.querySelector('.test').appendChild(em);

        //想查詢看看新增加上去的em標籤屬性class是否為red
        attrget = document.querySelector('.test em').getAttribute('class');
        console.log(attrget);
    </script>

頁面顯示結果：

console.log輸出結果為：red
(藉由以上結果確認em有成功新增)

範例2: createElemant()用於for的範例

    <h1 id='nameid'>產品名稱</h1>
    <ul class='list'></ul>
    <script>
        var products = [{
                name: "經典款T",
                price: 390,
                storage: 10
            },
            {
                name: "刷色牛仔長褲",
                price: 590,
                storage: 2
            },
        ];
        var str = '';
        var i
        for (i = 0; i < products.length; i++) {
            var li = document.createElement('li');
            li.textContent = products[i].name;
            document.querySelector('.list').appendChild(li);
        }
    </script>

顯示結果:

資料參考來源：Hex School